<template>
	<div>
		<Gheader :showheader="top"></Gheader>
		<Scroll class="wrapper">
			<div>
				
				<div class="emptyCar" v-if="$store.state.myCar.length==0">
					<div class="pink"></div>
					<p>你的购物车还是空的<br />去<a @click="$router.push({path:'/HomePage'})">逛逛</a>吧!</p>
				</div>
				<div class="noEmptyCar" v-else>
					<img :src="adImg" class="adImg"/>
					<div class="accounts" v-for="item in returnData.noLose">
						<CShoppingAccounts :data="item"></CShoppingAccounts>
					</div>
					<div class="loseAccounts" v-if="Object.keys(returnData).length!=0&&returnData.lose.length!=0">
						<h3 class="title">
							<span class="icon-shixiao"></span>
							<span>失效商品</span>
						</h3>
						<div class="commodity" v-for="item in returnData.lose">
							<div class="commodityLeft">							
								<div class="model"><img :src="item.imgurl" class="commodityImg"/></div>
							</div>
							<div class="commodityRight">
								<h4>{{item.name}}</h4>
								<h5>规格:<span>{{item.specification}}</span></h5>
								<h5>综合税:<span>{{item.taxes}}</span></h5>
								<div class="commodityRight-b">
									¥{{item.price}}<span>x {{item.num}} 件</span>
								</div>
							</div>
						</div>
						<div class="overLose">
							<span class="overLoseBtn" @click="remove">清除失效商品</span>
						</div>
					</div>
					<div class="guess">
						<h3><span></span>猜你喜欢<span></span></h3>
						<div>
							<div class="guessAccounts" v-for="item in guessData">
								<img :src="item.img" alt="" />
								<h5>{{item.name}}</h5>
								<p>¥{{item.price}}</p>
							</div>
						</div>
					</div>
					<p class="footermore">加载更多</p>
				</div>
			</div>
		</Scroll>
	</div>
</template>
<script type="text/javascript">
	import CShoppingAccounts from './CShoppingAccounts'
	import Scroll from '../../../base/Scroll'
	import Gheader from '../G-person/person-center/Gheader'
	export default {
	  name: 'ShoppingCart',
	  created:function(){	  	
	  	var myCar = this.$store.state.myCar;
		this.axios.post("/api/ShoppingCart",{myCar:myCar}).then(function(data){
			this.returnData=data.data;
		}.bind(this))
	  },
	  computed:{
			listen(){
				return this.$store.state.myCar
			}
		},
		watch:{
				listen:function(news,old){
					var myCar = this.$store.state.myCar;
					this.axios.post("/api/ShoppingCart",{myCar:myCar}).then(function(data){
						this.returnData=data.data;
					}.bind(this))
				}
		},
		methods:{
			remove:function(){
				var shoppingCarName=this.$store.state.personInfor[0].login.shoppingCarName;
				this.axios.post("/api/changeCar",
					{
						sign:"删除数据",
						data:{commoditys:this.returnData.lose},
						shoppingCarName:shoppingCarName
					}).then(function(data){
					this.$store.commit('changeCarData',data.data);
				}.bind(this))
			}
		},
	  data(){
	  	return{
	  		top: {
				word: "购物车 ",
				left: [false, false, false],
				right: [false, false, false, false, false, false],
				leftword: "",
				rightword1: "编辑",
				rightword2: ""
			},
			adImg:"../../../static/C-img/购物车广告.jpg",
			guessData:[{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			},{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			},{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			},{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			},{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			},{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			},{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			},{
				img:require("../../assets/D-img/口红1.png"),
				name:"不易脱妆口红",
				price:59
			}],
			returnData:{lose:[]}
			
	  	}
	  },
	  components:{
	  	Gheader,
	  	Scroll,
	  	CShoppingAccounts
	  }
	}
</script>
<style scoped>
	.wrapper{
		overflow: hidden;
		height:80vh;
		background-color: #f2f2f2;
	}
	.emptyCar{
		padding-top: 8vh;
	}
	.pink{
		width: 44vw;
		height: 40vw;
		background-color: pink;
		margin:auto;
	}
	.emptyCar p{
		font-size: 1.3rem;
		padding: 2vh 31vw;
		font-weight: 200;
	}
	.emptyCar p a{
		color:red;
		border-bottom: 1px solid red;
		display: inline-block;
		line-height: 1.3rem;
	}
	.noEmptyCar{
		width: 100vw;
	}
	.adImg{
		width: 100%;
	}
	.loseAccounts{
		background-color: white;
		border-top: 1px solid lightgray;
		margin-bottom: 1rem;
	}
	.title{
		font-weight: 200;
		font-size: 1.3rem;
		line-height: 2.5rem;
		border-bottom:1px solid lightgray;
	}
	.icon-shixiao{
		display: inline-block;
		width: 1.4rem;
		height: 1.4rem;
		vertical-align: -0.2rem;
		background: url(../../../static/C-img/失效.png) no-repeat;
		background-size: 100% 100%;
		margin-left: 0.8rem;
	}
	.commodity{
		border-bottom:1px solid lightgray;
		overflow: hidden;
	}
	.commodityLeft{
		float: left;
	}
	.model{
		width: 3.8rem;
		height: 4rem;
		margin: 2rem;
		margin-left: 5rem;
		text-align: center;
		display: inline-block;
	}
	.commodityImg{
		height: 100%;
	}
	.commodityRight{
		font-weight: 200;
	}
	.commodityRight h4{
		padding: 0.5rem 0;
		font-weight: 200;
		font-size: 1.2rem;
	}
	.commodityRight h5{
		font-weight: 200;
		font-size: 1rem;
	}
	.commodityRight-b{
		color: red;
		line-height: 2.6rem;
	}
	.commodityRight-b span{
		color:gray;
		font-size: 1.1rem;
		margin-left: 2rem;
	}
	.overLose{
		text-align: center;
		padding:0.8rem;
	}
	.overLoseBtn{
		border: 1px solid lightgray;
		font-size: 1rem;
		font-weight: 200;
		line-height: 1.6rem;
		display: inline-block;
		padding: 0 2rem;
		border-radius: 0.8rem;
	}
	.guess{
		background-color: white;
	}
	.guess>h3{
		font-weight: 200;
		font-size: 1.3rem;
		line-height: 2.5rem;
		text-align: center;
	}
	.guess>h3>span{
		display: inline-block;
		height: 1px;
		width: 3rem;
		background-color: lightgray;
		vertical-align: middle;
		margin: 0 0.5rem;
	}
	.guessAccounts{
		font-size: 1.2rem;
		width: 25vw;
		display: inline-block;	
	}
	.guessAccounts img{
		width: 11vw;
		margin:0 7vw;
	}
	.guessAccounts>p{
		text-align: center;
		color:red;
		font-weight: 400;
	}
	.guessAccounts>h5{
		text-align: center;
		font-weight: 400;
	}
	.footermore{
		text-align: center;
		font-size: 12px;
		color:gray;
	}
</style>